<template>
  <div class="app-container">
    <div>
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card  :userInfo="userInfo" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs active-name="timeline">
              <el-tab-pane label="时间线" name="timeline">
                <timeline :userInfo="userInfo" />
              </el-tab-pane>
              <el-tab-pane label="账号" name="account">
                <account :userInfo="userInfo"  />
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="update">
                <UpdatePassword :userInfo="userInfo"  />
              </el-tab-pane>
              <el-tab-pane label="修改头像" name="change">
                <ChangerAvatar />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import UserCard from './components/UserCard';
import Timeline from './components/Timeline';
import Account from './components/Account';
import UpdatePassword from './components/UpdatePassword';
import ChangerAvatar from './components/Avatara';

export default {
  data () {
    return {
      userInfo: {
        realName: '',
        phone: '',
        lastActiveTime: '',
        createTime: '',
        role: '1',
        imagePath: null
      }
    }
  },
  components: { UserCard,Timeline,Account,UpdatePassword,ChangerAvatar},
  created(){

    let user = JSON.parse(window.sessionStorage.getItem("user"));
    if( user == null){ //还没有登录
      this.$router.replace("/");
      return false;
    }

    this.userInfo.role = user.roles[0].id;

    this.getUserInfo();
    
  },
  methods:{
    getUserInfo(){
      console.log(1);
      if( this.userInfo.role == 1){
        this.getRequest("/api/admin/user/current").then( resp => {
          if(resp && resp.code == 200){
            this.userInfo = resp.obj;
          }
        })
      }else{
        this.getRequest("/api/teacher/user/current").then( resp => {
          if(resp && resp.code == 200){
            this.userInfo = resp.obj;
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  font-family: "华文楷体";
}
</style>